<template>
    <div id="app">
        <div class="title">
            <div class="left" @click="handleChangePage('/city')">{{cityName}}</div>
            <div>影院</div>
            <div class="right" @click="handleChangePage('/cinema/search')"><i class="iconfont icon-sousuo"></i></div>
        </div>
        <div class="select">
            <div class="left" @click="arealistshow" :class="arealistShow?'active':''">{{current}}<i class="iconfont icon-more_unfold"></i></div>
            <div>App订票</div>
            <div class="right">最近去过</div>
        </div>
        <div class="area" v-show="arealistShow">
            <ul>
                <li v-for="(item,index) in arealist" :key="index" @click="handleArea(item)" :class="{active:item===current}">{{item}}</li>
            </ul>
        </div>
        <div class="content">
            <!-- <ul>
                <li v-for="item in computedCinemaList" :key="item.cinemaId">
                    <h4>{{item.name}}</h4>
                    <p>{{item.address}}</p>
                </li>
            </ul> -->
            <ul>
                <CinemaItem v-for="item in computedCinemaList" :key="item.cinemaId" :item="item"></CinemaItem>
            </ul>
        </div>
    </div>
</template>

<script>
import instance from '@/utils/http'
import CinemaItem from '../Cinema/CinemaItem'
import {mapState,mapGetters,mapActions,mapMutations} from 'vuex'
export default {
    //https://m.maizuo.com/gateway?cityId=430100&ticketFlag=1&k=6136987
    data(){
        return{
            // cinemaList:[],
            arealistShow:false,
            current:'全城'
        }
    },
    methods:{
        ...mapActions('cinema',['getCinemaActions']),
        ...mapMutations('cinema',['setCinemaList']),
        handleArea(data){
            console.log(data)
            this.current = data
            this.arealistShow=false
        },
        arealistshow(){
            this.arealistShow=!this.arealistShow

        },
        handleChangePage(path){
            this.$router.push(path)
            if(path==='/city'){
                this.setCinemaList([])
            }
        }
    },
    computed:{
       ...mapState('cinema',['dataList']),
       ...mapGetters('cinema',['topDateList']),
       ...mapState('city',['cityName','cityId']),
        arealist(){
          let newArr =this.dataList.map(item=>item.districtName) 
          let arealist = ['全城',...Array.from(new Set(newArr))]
          return arealist        
        },
        //根据选择的区域过滤出相应区域的影城
        //例如芙蓉区那么数组过滤新的数组，数组里面全是放着的全是金山区的影院
        computedCinemaList(){
            if(this.current=="全城"){
                return this.dataList
            }
            return this.dataList.filter(item=>item.districtName === this.current)
        }
    },
        created(){
            if(this.dataList.length>0){
                // console.log("直接使用vuex里面的数据",this.cityId)
            }else{
                // this.$store.dispatch("cinema/getCinemaActions")
                this.getCinemaActions(this.cityId)
            }
        },
        components:{
            CinemaItem
        }   
}
</script>
<style lang="scss" scoped>
*{margin: 0;padding: 0;}
.active{
    border:1px solid orange !important;
    color: orange;
}
.title{
        display: flex;
        position: fixed;
        top: 0px;
        left: 0px;
        width: 100%;
        background: #fff;
        height: 40px;
        line-height: 40px;
        padding: 0 10px;
        border-bottom: 1px solid #f5f5f5;
        z-index:12;
        div{
            flex:1;
        }
        .left{
            text-align: left;
            margin-left: 18px;
        }
    }
    .select{
        margin-top: 42px;
        display: flex;
        width: 100%;
        justify-content: space-between;
        div{
            display: flex;
            background: #f4f4f48c;
            flex: 1;
            height: 30px;
            // text-align: center;
            align-items: center;
            padding-left: 20px;
        }
    }
    .content{
    width: 100%;
    font-size: 16px;
    // li{
    //     padding: 10px;
    //     border-bottom: 1px solid #f5f5ff;
    //     p{
    //         overflow: hidden;
    //         -o-text-overflow: ellipsis;
    //         text-overflow: ellipsis;
    //         white-space: nowrap;
    //     }
    // }
}
.area{
    position: absolute;
    top: 80px;
    left: 0;
    background: #ffffff;
    width: 100%;
    z-index: 10;
    ul{
        display: flex;
        list-style: none;
        width: 100%;
        flex-wrap: wrap;
        box-sizing: border-box;

    }
    li{
        width: 24%;
         padding-top: 10px;
         border: 1px solid #f4f4f4;
         text-align: center;
    }
}
</style>